<template>
    <div class="index">
        <el-container>
            <el-aside width="200px">
                <div class="logo_box clearfix">
                    <img class="fl" src="../assets/logo.png" alt="">
                    <p class="fl">imooc-admin</p>
                </div>
                  <el-menu
                    active-text-color="#ffd04b"
                    background-color="#304156"
                    class="el-menu-vertical-demo"
                    default-active="2"
                    text-color="#fff"
                    @open="handleOpen"
                    @close="handleClose"
                    router
                    >
                     <el-menu-item :index="item.path" v-show="!item.children" v-for="(item, index) in menus" :key="index" @click="get(item.path,item.name)">
                            <el-icon><UserFilled /></el-icon>
                            <span>{{item.name}}</span>
                        </el-menu-item>
                    <el-sub-menu :index="index" v-show="item.children" v-for="(item, index) in menus" :key="index">
                    <template #title>
                        <el-icon><User /></el-icon>
                        <span>{{item.name}}</span>
                    </template>
                        <el-menu-item :index="it.path" v-for="(it, index) in item.children" :key="index" @click="get(it.path,it.name)"><el-icon><UserFilled /></el-icon>{{it.name}}</el-menu-item>
                    </el-sub-menu>
                        <!-- <el-menu-item index="1">
                            <el-icon><UserFilled /></el-icon>
                            <span>个人中心</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <el-icon><Histogram /></el-icon>
                            <span>数据可视化</span>
                        </el-menu-item>
                    <el-sub-menu index="3">
                    <template #title>
                        <el-icon><User /></el-icon>
                        <span>用户</span>
                    </template>
                        <el-menu-item index="3-1"><el-icon><UserFilled /></el-icon>员工管理</el-menu-item>
                        <el-menu-item index="3-2"><el-icon><Tickets /></el-icon>角色列表</el-menu-item>
                        <el-menu-item index="3-3"><el-icon><Lock /></el-icon>权限列表</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="4">
                        <el-icon><Management /></el-icon>
                        <span>文章</span>
                    </el-menu-item> -->
                </el-menu>
            </el-aside>
            <el-container class="right">
                <el-header>
                    <div class="top clearfix">
                        <ol class="left_top fl clearfix">
                            <li class="fl">
                                <el-icon class="leftFlag"><Expand /></el-icon>
                            </li>
                            <li class="fl">
                                <el-breadcrumb>
                                <el-breadcrumb-item :to="{ path: '/' }">用户</el-breadcrumb-item>
                                    <el-breadcrumb-item><a href="/">员工管理</a></el-breadcrumb-item>
                                </el-breadcrumb>
                            </li>
                        </ol>
                        <ol class="right_top fr clearfix">
                            <li class="fl">
                                <el-icon><Right /></el-icon>
                            </li>
                            <li class="fl">
                                <el-icon><Search /></el-icon>
                            </li>
                            <li class="fl">
                                <el-icon><FullScreen /></el-icon>
                            </li>
                            <li class="fl">
                                <el-icon><Apple /></el-icon>
                            </li>
                            <li class="fl">
                                <el-dropdown>
                                    <img src="../assets/logo.png" alt="">
                                    <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="router.push('/profile')">首页</el-dropdown-item>
                                        <el-dropdown-item>课程主页</el-dropdown-item>
                                        <el-dropdown-item @click="out">退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </li>
                        </ol>
                    </div>
                    <div class="tags">
                         <el-tabs
                            v-model="editableTabsValue"
                            type="card"
                            class="demo-tabs"
                            closable
                            @tab-click="change"
                            @tab-remove="del"
                        >
                            <el-tab-pane
                            v-for="item in store.state.tabs"
                            :key="index"
                            :label="item.name"
                            :name="item.path"
                            >   
                            </el-tab-pane>
                        </el-tabs>
                        <!-- 个人中心 -->
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { UserFilled,Histogram,User,Tickets,Lock,Management,Expand,Right,Search,FullScreen,Apple } from "@element-plus/icons-vue";
import {ref,reactive,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import { GetUserList } from '@/utils/user.js'
const store = useStore();
const router = useRouter();
let tabIndex = 2;
const paths = ref('');
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: '',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])
const get = (path,name)=>{
    console.log(path,name);
    let obj = {path:path,name:name};
    store.commit('getTab',obj);
}
const menus = ref([
    {
        path:'profile',
        name:'个人中心',
        icon:'User'
    },
    {
        path:'chart',
        name:'数据可视化'
    },
    {
        name:'用户',
        children:[
            {
                path:'userMassage',
                name:'员工管理'
            },
            {
                path:'roleList',
                name:'角色列表'
            },
            {
                path:'permissionList',
                name:'权限列表'
            }
        ]
    },
    {
        name:'文章',
        children:[
            {
                path:'articleRanking',
                name:'文章排名'
            },
            {
                path:'articleCreate',
                name:'创建文章'
            }
        ]
    }
])

const change = (pane,e)=>{
    console.log(pane.props.name);
    paths.value = pane.props.name;
    router.push('/'+paths.value);
}
const del = (name)=>{
    // console.log(name);
    store.commit('delTabs',name)
}
const out = ()=>{
    store.commit('clearToken');
    router.push('/login');
}
onMounted(() => {
    
})
</script>
<style lang="scss" scoped>
    .index{
        background: #000;
        color: #fff;
        .el-container{
            height: 100%;
        }
        .el-aside{
            background: rgb(48, 65, 86);
        }
        .right{
            background: #ccc;
            color: #000;
            .el-header{
                z-index: 99;
                background: #fff;
                box-shadow: 2px 3px 5px #ccc;
                height: 102px;
                .top{
                    height: 60px;
                    line-height: 60px;
                    font-size: 18px;
                    border-bottom: 1px solid rgb(230, 230, 230);
                    .left_top{
                        height: 100%;
                        li{
                            margin-right: 15px;
                            ::v-deep .leftFlag{
                                font-size: 24px;
                                margin-top: 22px;
                            }
                            .el-breadcrumb{
                                margin-top: 28px;
                            }
                        }
                    }
                    .right_top{
                        li{
                            margin-left: 15px;
                            .el-icon{
                                margin-top: 20px;
                                font-size: 24px;
                            }
                        }
                        img{
                            width: 45px;
                            margin-top: 10px;
                        }
                    }
                }
                .tags{
                    // background: #ccc;
                    height: 32px;
                    // line-height: 32px;
                    .tag{
                        display: inline-block;
                        padding: 5px 20px 5px ;
                        background: #ccc;
                        font-size: 12px;
                    }
                }
            }
            .el-main{
                background: rgb(246, 245, 245);
            }
        }
       .logo_box{
            padding: 20px 0 30px 20px;
            line-height: 40px;
            img{
                width: 45px;
                margin-right: 10px;
            }
        }
        ::v-deep .el-menu-item{
            display: inline-block;
            width: 100%;
            .el-icon{
                font-size: 14px;
                margin-bottom: 4px;
            }
            p{
                text-align: center;
            }
        }
    }
</style>